<template>
	<view class="question-item">
		<view class="f-s-16 f-w-b u-m-b-32">{{ index }}. {{info.title }}</view>
		<view>
			<up-radio-group labelColor="#333333" activeColor="#1677FF" inactiveColor="#C7CCD4" v-model="info.yourAnswer" placement="column">
				<block v-if="info.optionA">
					<up-radio :customStyle="{marginBottom: '34rpx'}" :label="` A ${info.optionA}`" name="A">
					</up-radio>
				</block>
				<block v-if="info.optionB">
					<up-radio :customStyle="{marginBottom: '34rpx'}" :label="` B ${info.optionB}`" name="B">
					</up-radio>
				</block>
				<block v-if="info.optionC">
					<up-radio :customStyle="{marginBottom: '34rpx'}" :label="` C ${info.optionC}`" name="C">
					</up-radio>
				</block>
				<block v-if="info.optionD">
					<up-radio :customStyle="{marginBottom: '34rpx'}" :label="` D ${info.optionD}`" name="D">
					</up-radio>
				</block>
			</up-radio-group>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		info: Object,
		index: Number
	})
</script>

<style lang="scss" scoped>
	.question-item {
		background-color: #fff;
		padding: 32rpx;
		margin-bottom: 16rpx;

	}
</style>